<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<style type="text/css">
			.aui-list .aui-list-item i.aui-iconfont {
			    -webkit-align-self: center;
			    align-self: center;
			    font-size: 18px;
			}
			img.aui-img-round {
			    border-radius: 1%;
			}
		</style>
	</head>
	<body>
		<div class="aui-searchbar" id="search">
	       	<div class="aui-searchbar-input aui-border-radius">
	            <i class="aui-iconfont aui-icon-search"></i>
	            <input type="search" placeholder="搜索" id="search-input">
	            <div class="aui-searchbar-clear-btn">
	                <i class="aui-iconfont aui-icon-close"></i>
	            </div>
	        </div>
	       <!--  <div class="aui-searchbar-btn" tapmode>取消</div> -->
	    </div>
	    
	    <section class="aui-content">
	    		    <ul class="aui-list aui-media-list" id="nice-articles">

			         <!-- <li class="aui-list-item aui-list-item-middle" onclick="openDetailed()">
			            <div class="aui-media-list-item-inner">
			                 <div class="aui-list-item-inner aui-list-item-arrow">
			                    <div class="aui-list-item-text">
			                        <div class="aui-list-item-title aui-font-size-14">李四退签记录</div>
			                        <div class="aui-list-item-right">2017-08-02</div>
			                    </div>
			                </div>
			            </div>
			        </li> -->
				</ul>
	    </section>
	    <section class="aui-content" id="list"></section>
	</body>
	<script src="../js/jquery.min.js"></script>
	<script type="text/javascript">
		
		//初始方法
		$(function() {
			getPage(pageNumber, pageSize);
		});
		
		
		$("#search-input").change(function(){
			$("#nice-articles").html("");
			pageNumber = 1;
			pageSize=10;
			countSize = 0;
			getPage(pageNumber, pageSize);
		});
		
		//当前初始页
		var pageNumber = 1;
		//每页显示多少条
		var pageSize = 10;
		var countSize = 0;
		
		
		
		function getPage(pageNumber, pageSize) {
			var registerEmp = $("#search-input").val();
			$.ajax({
				url : '${pageContext.request.contextPath}/listRegister.do?page=' + pageNumber + '&limit=' + pageSize +'&individual=individual&registerEmp=' + registerEmp,
				type : "POST",
				dataType : "json",
				success : function(data) {
 					var html="";
					if (data.flag == "1" ) {
						if (typeof(data.data) != "undefined") {
 						var da = data.data;
						for (var i = 0; i < da.length; i++) {
							html += '<li class="aui-list-item aui-list-item-middle" onclick="openDetailed(\'' + da[i].registerId + '\')"><div class="aui-media-list-item-inner">';
							html += '<div class="aui-list-item-inner aui-list-item-arrow"><div class="aui-list-item-text"><div class="aui-list-item-title aui-font-size-13">';
							if (da[i].registerEmp != null && da[i].registerEmp != "") {
								html += da[i].registerEmp;
							}
							if (da[i].registerType != null && da[i].registerType != "") {
								html +=da[i].registerType==0?"<span style=\"font-size: 12px;color: grey;\" >&nbsp;&nbsp;上班</span>":"<span style=\"font-size: 12px;color: grey;\" >&nbsp;&nbsp;下班</span>";
							}
							html+='</div><div class="aui-list-item-right">';
							if (da[i].registerDate != null && da[i].registerDate != "") {
								html += toDate(da[i].registerDate);
							}
							html += "</div></div></div></div></li>";
						}
						
						if(Math.ceil(countSize / 10) == pageNumber ) {
							console.log("last page");
							$("#list").show().html("<div style='width:100%;text-align:center;color:#999;padding:10px 0;'>没有更多数据了！</div>");
						} else {
							console.log("not last page");
						}
						
						$("#nice-articles").append(html);
						
						
						//countSize = da.total;
						//复制总记录数
					} else {
						$("#list").show().html("<div style='width:100%;text-align:center;color:#999;padding:10px 0;'>没有更多数据了！</div>");
					}
					//alert(html);
					$("#nice-articles").html(html);
					}
				}
			});
		}
		
		//打开详细
		function openDetailed(id) {
			window.location.href="frame_clock_detailed.do?id="+id;
			//$("#body").load("frame_chance_detailed.do?id="+id);
		}		
			
		function toDate(data) {
			var date = new Date(data);
			var y = date.getFullYear();
			var m = date.getMonth() + 1;
			m = m < 10 ? '0' + m : m;
			var d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			return y + '-' + m + '-' + d;
		}
		
/**
	 *转换金钱100,000.00 
	 */
	function formatCurrency(num) {
			if (num != null && num != "") {
				num = num.toString().replace(/\$|\,/g, '');
				if (isNaN(num))
					num = "0";
				sign = (num == ( num = Math.abs(num)));
				num = Math.floor(num * 100 + 0.50000000001);
				cents = num % 100;
				num = Math.floor(num / 100).toString();
				if (cents < 10)
					cents = "0" + cents;
				for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
					num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
				return (((sign) ? '' : '-') + num + '.' + cents);
			}
		}
	</script>
</html>